<template>
	<div class="lc_wrap">
		<el-row class="dustHighEquipment">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready"></lcTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<avue-crud :data="data" :option="option" v-model="form" @on-load="onLoad" ref="crud" :table-loading="loading" @search-change="searchChange" @row-save="rowSave" @row-update="rowUpdate" @selection-change="selectionChange" @search-reset="searchReset" @refresh-change="refreshChange">
						<!--自定义头部按钮菜单-->
						<template slot="menuLeft">
							<el-button type="primary" @click="add" size="small" icon="el-icon-plus" v-if="permissionList.addBtn">新建</el-button>
							<el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete" v-if="permissionList.delBtn">删 除</el-button>
						</template>
						<template slot-scope="scope" slot="menu">
							<el-button icon="el-icon-view" size="small" type="text" @click="view(scope.row)" v-if="permissionList.viewBtn">查看</el-button>
							<el-button icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)" v-if="permissionList.editBtn">编辑</el-button>
						</template>
						<template slot="mapForm">
							<!--新增状态-->
							<div v-if="isAdd">
								<div class='plan_wrap' :style="{backgroundImage: 'url(' + imgUrl + ')',width:box.width+ 'px',height:box.height+ 'px'}" @click="addMask">
									<img v-if="showTD" src="/img/bg/tuding/icon3.png" alt="" class="tuding" :style="{left:left+'px',top:top+'px'}" />
									<el-tooltip placement="top" effect="light" v-for="(item,index) in allHighriskDeviceInfoList" :key="index">
										<img src="/img/bg/m_tadiao.png" alt="" v-if="item.type==1" class="tuding" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<img src="/img/bg/m_xieliao.png" alt="" class="tuding" v-if="item.type==2" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<img src="/img/bg/m_shenjiang.png" alt="" class="tuding" v-if="item.type==3" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<div slot="content">设备名称:{{item.deviceName}}</div>
									</el-tooltip>
								</div>
							</div>
							<!--编辑状态/查看状态-->
							<div v-else>
								<div class='plan_wrap' :style="{backgroundImage: 'url(' + imgUrl + ')',width:box.width+ 'px',height:box.height+ 'px'}" @click="addMask">
									<el-tooltip placement="top" effect="light" v-for="(item,index) in allHighriskDeviceInfoList" :key="index">
										<img src="/img/bg/tuding/icon3.png" alt="" class="tuding" :style="{left:left+'px',top:top+'px'}" v-if="formatDeviceId(item)" />
										<img src="/img/bg/m_tadiao.png" alt="" v-if="item.type==1&&!formatDeviceId(item)" class="tuding" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<img src="/img/bg/m_xieliao.png" alt="" class="tuding" v-if="item.type==2&&!formatDeviceId(item)" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<img src="/img/bg/m_shenjiang.png" alt="" class="tuding" v-if="item.type==3&&!formatDeviceId(item)" :style="{left:item.posx+'px',top:item.posy+'px'}" />
										<div slot="content">设备名称:{{item.deviceName}}</div>
									</el-tooltip>
								</div>
							</div>
						</template>
					</avue-crud>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import { mapGetters } from "vuex";
	import { getList, addOrUpdate, remove, getDeptTree, checkMn } from "@/api/dust/highEquipment";
	import { column, group } from "./option"
	import { validateNumber, validateInter } from "@/util/rulesReg";
	import lcUpload from "@/components/upload/uploadImg";
	import { getData } from "@/api/dust/plan";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	export default {
		components: {
			lcUpload,
			lcTree,
			overlay
		},
		data() {
			return {
				box: {
					width: 0,
					height: 0
				},
				allHighriskDeviceInfoList: [], //  储存所有的高危设备
				deptInfoId: '', // 获取平面图需要这个项目ID 参数 通过站点ID 循环获取
				showTD: false,
				imgUrl: '', // 平面图背景图
				isAdd: false, // 是否新增状态
				isEdit: false, // 是否编辑状态
				isView: false, // 是否查看状态
				isParentId: false, // 查看是否点击了站点的父级
				left: 0,
				top: 0,
				currentRow: {},
				leftWidth: this.$leftWidth,
				rightWidth: this.$rightWidth,
				form: {}, // 储存表单字段
				nodeId: null,
				siteInfoName: '', // 储存当前选中站点的名称
				siteInfoId: '', // 储存当前选中站点的ID
				nodeList: [], // 存放已勾选节点value的数组（底层节点
				filterText: '',
				// ======右侧表格数据配置=====
				loading: false, // 表格请求数据的加载框
				selectionList: [], // 储蓄选择项，批量删除的时候用到
				query: {
					deviceName: '', // 搜索设备名称
					type: '', // 搜索设备类型
				},
				data: [], // 表格数据体
				option: {
					// height: '100%',
					calcHeight: 30,
					selection: true,
					selectionWidth: 50,
					tip: false,
					align: 'center',
					menuAlign: 'center',
					menuWidth: 150,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: false,
					delBtn: false,
					addBtn: false,
					editBtn: false,
					column: column,
					group: group,
					dialogClickModal: false
				}
			};
		},
		computed: {
			...mapGetters(["permission"]),
			permissionList() {
				return {
					addBtn: this.permission.highEquipment_add,
					viewBtn: this.permission.highEquipment_view,
					delBtn: this.permission.highEquipment_delete,
					editBtn: this.permission.highEquipment_edit
				}
			},
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			}
		},
		mounted() {

		},
		watch: {
			"form.posx" (val) {
				this.left = val
			},
			"form.posy" (val) {
				this.top = val
			},
			"form.type" (val) {
				//				this.form.siteInfoId = this.siteInfoId
				//				this.form.siteInfoName = this.siteInfoName
				const limitMagnitude = this.findObject(this.option.group, 'limitMagnitude') // 塔机工作臂长(米)
				const limitWeight = this.findObject(this.option.group, 'limitWeight') // 额定重量(吨)
				const limitTorque = this.findObject(this.option.group, 'limitTorque') // 额定力矩(吨*米)
				const limitHeight = this.findObject(this.option.group, 'limitHeight') // 塔机高度(米)
				const staffId = this.findObject(this.option.group, 'staffId') // 驾驶员
				const posx = this.findObject(this.option.group, 'posx') // 平面x坐标
				const posy = this.findObject(this.option.group, 'posy') // 平面y坐标
				const map = this.findObject(this.option.group, 'map') // 平面图
				const siteInfoName = this.findObject(this.option.group, 'siteInfoName') // 站点名称
        this.$set(limitMagnitude, 'display', false)
        this.$set(limitHeight, 'display', false)
        this.$set(limitWeight, 'display', false)
        this.$set(limitTorque, 'display', false)
        this.$set(staffId, 'display', true)
        this.$set(posx, 'display', true)
        this.$set(posy, 'display', true)
        this.$set(siteInfoName, 'display', true)
        this.$set(map, 'display', true)
				switch(val) {
					case 1:
						this.option.group[1].label = '塔吊机参数配置'
						this.$set(limitMagnitude, 'display', true)
						this.$set(limitWeight, 'display', true)
						this.$set(limitTorque, 'display', true)
						this.$set(limitHeight, 'display', true)
						this.$set(this.option.group[1], 'display', true)
						break;
					case 2:
						this.option.group[1].label = '卸料机参数配置'
						this.$set(limitWeight, 'display', true)
						this.$set(this.option.group[1], 'display', true)
						break;
					case 3:
						this.option.group[1].label = '升降机参数配置'
						this.$set(this.option.group[1], 'display', true)
						break;
          case 4:
            this.$set(staffId, 'display', false)
            this.$set(posx, 'display', false)
            this.$set(posy, 'display', false)
            this.$set(siteInfoName, 'display', false)
            this.$set(map, 'display', false)
            this.option.group[1].label = '司机人脸识别设备参数配置'
            this.$set(this.option.group[1], 'display', true)
            break;
				}
			}
		},
		methods: {
			ready(data, treeData) {
				this.isParentId = data.nodeType
				this.nodeId = data.key
				this.siteInfoName = data.title
				this.siteInfoId = data.key
				// let newArr = this.recursion(treeData)
				// this.deptInfoId = this.queryDeptInfoId(newArr, data.parentId)
				this.deptInfoId = data.parentKey //获取企业key
				this.onLoad()
			},
			recursion(arr, newArr = []) {
				arr.forEach(item => {
					let obj = {}
					obj.id = item.id
					obj.key = item.key
					obj.parentId = item.parentId
					newArr.push(obj)
					if(item.hasChildren) {
						newArr = newArr.concat(this.recursion(item.children))
					}
				})
				return newArr
			},
			queryDeptInfoId(arr, value) {
				let key
				for(var i = 0; i < arr.length; i++) {
					if(arr[i].id == value) {
						key = arr[i].key
						break;
					}
				}
				return key
			},
			formatDeviceId(item) {
				if(item.mn == this.currentRow.mn) {
					return true
				} else {
					return false
				}
			},
			addMask(e) {
				if(this.isView) {
					return false
				}
				if(this.isEdit) {
					this.form.posx = e.layerX - 16
					this.form.posy = e.layerY - 16
					return false
				} else {
					this.showTD = true
					this.form.posx = e.layerX - 16
					this.form.posy = e.layerY - 16
				}

			},
			changeTreeBox() {
				this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
				this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
			},
			add() {
				let siteInfoName = this.findObject(this.option.group, 'siteInfoName') // 站点名称
				this.$set(siteInfoName, 'value', this.siteInfoName)
				if(this.isParentId != 2) {
					this.$message({
						type: "warning",
						message: "请选择站点"
					});
					return false
				}
				// 读取配置图
				getData(this.deptInfoId).then(res => {
					this.box.width = res.data.data.width
					this.box.height = res.data.data.height
					this.allHighriskDeviceInfoList = res.data.data.allHighriskDeviceInfoList
					this.imgUrl = res.data.data.picUrl
					let map = this.findObject(this.option.group, 'map')
					if(!this.imgUrl) {
						this.$set(map, 'display', false)
					} else {
						this.$set(map, 'display', true)
					}
					this.showTD = false
					this.isAdd = true
					this.isEdit = false
					this.isView = false
					this.$set(this.option.group[1], 'display', true)
					const type = this.findObject(this.option.group, 'type')
					this.$set(type, 'disabled', false)
					let siteInfoName = this.findObject(this.option.group, 'siteInfoName') // 塔机高度(米)
					this.$set(siteInfoName, 'value', this.siteInfoName)
					this.$refs.crud.rowAdd()
				})
			},
			view(row) {
				getData(this.deptInfoId).then(res => {
					this.box.width = res.data.data.width
					this.box.height = res.data.data.height
					this.allHighriskDeviceInfoList = res.data.data.allHighriskDeviceInfoList
					this.imgUrl = res.data.data.picUrl
					let map = this.findObject(this.option.group, 'map')
					if(!this.imgUrl) {
						this.$set(map, 'display', false)
					} else {
						this.$set(map, 'display', true)
					}
					this.showTD = false
					this.isAdd = false
					this.isEdit = false
					this.isView = true
					this.currentRow = row
					this.$set(this.option.group[1], 'display', true)
					const type = this.findObject(this.option.group, 'type')
					this.$set(type, 'disabled', true)
					let siteInfoName = this.findObject(this.option.group, 'siteInfoName') // 塔机高度(米)
					this.$set(siteInfoName, 'value', this.siteInfoName)
					this.$refs.crud.rowView(row, row.$index);
				})
			},
			edit(row) {
				getData(this.deptInfoId).then(res => {
					this.box.width = res.data.data.width
					this.box.height = res.data.data.height
					this.allHighriskDeviceInfoList = res.data.data.allHighriskDeviceInfoList
					this.imgUrl = res.data.data.picUrl
					let map = this.findObject(this.option.group, 'map')
					if(!this.imgUrl) {
						this.$set(map, 'display', false)
					} else {
						this.$set(map, 'display', true)
					}
					this.showTD = false
					this.isAdd = false
					this.isEdit = true
					this.isView = false
					this.currentRow = row
					this.$set(this.option.group[1], 'display', true)
					const type = this.findObject(this.option.group, 'type')
					this.$set(type, 'disabled', true)
					let siteInfoName = this.findObject(this.option.group, 'siteInfoName') // 塔机高度(米)
					this.$set(siteInfoName, 'value', this.siteInfoName)
					this.$refs.crud.rowEdit(row, row.$index);
				})

			},
			refreshChange() {
				this.onLoad(this.page, this.query);
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			// 删除按钮操作
			handleDelete() {
				if(this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad();
						this.$message({
							type: "success",
							message: "操作成功!"
						});
						this.$refs.crud.toggleSelection();
					});
			},
			// 编辑按钮点击修改时执行的事件
			rowUpdate(row, index, done, loading) {
				// 没有修改过mn
				if(this.currentRow.mn != row.mn) {
					checkMn(row.mn).then(res => {
						if(res.data.data) {
							addOrUpdate(row).then(() => {
								this.onLoad();
								this.$message({
									type: "success",
									message: "操作成功!"
								});
								done();
							}, error => {
								loading();
							});
						} else {
							this.$message({
								type: "error",
								message: "mn号已存在!"
							});
							loading();
						}
					})
				} else {
					addOrUpdate(row).then(() => {
						this.onLoad();
						this.$message({
							type: "success",
							message: "操作成功!"
						});
						done();
					}, error => {
						loading();
					})
				}
			},
			// 清空按钮重置表单执行的事件
			searchReset(type) {
				this.query = {
						deviceName: '',
						type: ''
					},
					this.$refs.crud.searchReset();
				this.onLoad();
			},
			// 新增按钮执行事件
			rowSave(row, done, loading) {
				row.siteInfoId = this.siteInfoId
				checkMn(row.mn).then(res => {
					if(res.data.data) {
						addOrUpdate(row).then(() => {
							this.onLoad();
							this.$message({
								type: "success",
								message: "操作成功!"
							});
							this.searchReset()
							done();
						}, error => {
							loading();
						});
					} else {
						this.$message({
							type: "error",
							message: "mn号已存在!"
						});
						loading();
					}
				})
			},
			// 点击搜索后执行的事件
			searchChange(params, done) {
				this.query = params;
				this.onLoad();
				done();
			},
			onLoad() {
				this.loading = true
				let query = {
					deviceName: this.query.deviceName,
					type: this.query.type,
					siteInfoId: this.siteInfoId
				}
				getList(query).then(res => {
					this.loading = false
					this.data = res.data.data;
				});
			}
		}
	};
</script>

<style lang="scss">
	.dustHighEquipment {
		.table-wrapper {
			.el-card__body {
				height: calc(100% - 35px);
				.avue-crud {
					height: calc(100% - 125px);
				}
			}
			.el-table__fixed {
				height: calc(100% - 12px)!important;
			}
			.el-table__fixed-right {
				height: calc(100% - 12px) !important;
			}
			.el-table__fixed-right::before,
			.el-table__fixed::before {
				height: 0px;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 500px;
	}

	.box {
		height: 100%;
		margin-bottom: 0;
	}

	.el-row {
		height: calc(100% - 20px);
	}

	.el-col {
		height: 100%;
		overflow: auto;
	}

	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
	}

	.search-left {
		display: flex;
		height: 33px;
		line-height: 33px;
	}

	.search-right {
		display: flex;
	}

	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}

	.overlay {
		position: absolute;
		width: 200px;
		height: 100%;
		opacity: 0;
		display: flex;
		align-items: center;
		padding-left: 6px;
		.tree-tool {
			height: 34px;
			width: 18px;
			background: #fff;
			box-shadow: 2px 1px 4px #ccc;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			cursor: pointer;
			display: flex;
			padding: 6px 0;
			z-index: 9999;
			.tool-line {
				margin-left: 3px;
				height: 100%;
				border-left: 1px solid #ddd;
			}
		}
	}

	.overlay:hover {
		opacity: 1;
	}

	.tuding {
		position: absolute;
	}

	.plan_wrap {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>
